<template>
  <div class="singer-box">
    <div class="top">
      <div class="first">
        <div :class="selectArea === -1 ? 'filterActive' : ''" @click="handleAllArea">全部</div>
        <div v-for="(area, index) in areaList" :key="index"
          :class="selectArea === area.areaid ? 'filterActive' : ''"
          @click="handleArea(area, index)"
        >
          {{ area.name }}
        </div>
      </div>
      <div class="second">
        <div :class="selectType === -1 ? 'filterActive' : ''" @click="handleAllType">全部</div>
        <div v-for="(gender, index) in genderList" :key="index"
          :class="selectType === gender.id ? 'filterActive' : ''"
          @click="handleGender(gender, index)"
        >
          {{ gender.name }}
        </div>
      </div>
    </div>
    <div class="letter-list">
      <div class="letter-item" :class="activeIndex === -1 ? 'active' : ''"
        @click="handleAll"
      >
        全部
      </div>
      <div class="letter-item" v-for="(item, index) in letterList" :key="index"
        :class="activeIndex === item ? 'active' : ''"
        @click="handleFilterByLetter(item, index)"
      >
        {{ item }}
      </div>
      <div class="letter-item" @click="handleOther"
        :class="activeIndex === -2 ? 'active' : ''"
      >
      #</div>
    </div>
    <white-space :space="20"></white-space>
    <div class="content">
      <template>
        <div class="singer" v-for="(item, index) in singerFilterList" :key="index"
          @click="goDetail(item.Fsinger_mid, item.Fsinger_name)"
        >
            <div class="pic">
              <img :src="item.picUrl" v-if="index < 12">
            </div>
            <div class="name">{{ item.Fsinger_name }}</div>
        </div>
      </template>
    </div>
    <router-view/>
  </div>
</template>

<script>
import { getSingerList } from '@/service/music';
// Ftype 0 男 1 女 2 组合
// Fsort 目测是排行
// Farea 0 港台 1 内地 2 日韩 3 欧美
export default {
  data() {
    return {
      letterList: [],
      singerList: [],
      singerFilterList: [],
      activeIndex: -1,
      selectType: -1,
      selectArea: -1,
      selectLetter: -1,
      areaList: [
        { areaid: '1', name: '内地' },
        { areaid: '0', name: '港台' },
        { areaid: '3', name: '欧美' },
        { areaid: '2', name: '日韩' },
      ],
      genderList: [
        { id: '0', name: '男' },
        { id: '1', name: '女' },
        { id: '2', name: '组合' },
      ]
    };
  },
  methods: {
    goDetail(id, name) {
      if (!id) return this.$message.error('缺少id，无法跳转');
      this.$router.push(`/music/singer/${ id }?name=${ name }`);
      return false;
    },
    handleFilterByLetter(item, idx) {
      this.activeIndex = item
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.selectArea === -1 && this.selectType === -1) {
          return item === singer.Findex;
        } else {
          if (this.selectArea === -1) {
            return item === singer.Findex && this.selectType === singer.Ftype;
          } else if (this.selectType === -1) {
            return item === singer.Findex && this.selectArea === singer.Farea;
          } else {
            return item === singer.Findex && this.selectArea === singer.Farea && this.selectType === singer.Ftype;
          }
        }
      })
    },
    handleAll() {
      this.activeIndex = -1;
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.selectArea === -1 && this.selectType === -1) {
          return singer;
        } else {
          if (this.selectArea === -1) {
            return singer && this.selectType === singer.Ftype;
          } else if (this.selectType === -1) {
            return singer && this.selectArea === singer.Farea;
          } else {
            return singer && this.selectArea === singer.Farea && this.selectType === singer.Ftype;
          }
        }
      })
    },
    handleOther() {
      this.activeIndex = -2;
      this.singerFilterList = this.singerList.filter((singer) => {
        return singer.Findex.charCodeAt() > 90 || singer.Findex.charCodeAt() < 65;
      })
    },
    handleArea(item, idx) {
      this.selectArea = item.areaid;
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.selectType === -1 && this.activeIndex === -1) {
          return item.areaid === singer.Farea;
        } else {
          if (this.activeIndex === -1) {
            return item.areaid === singer.Farea && this.selectType === singer.Ftype;
          } else if (this.selectType === -1) {
            return item.areaid === singer.Farea && this.activeIndex === singer.Findex;
          } else {
            return item.areaid === singer.Farea && this.activeIndex === singer.Findex && this.selectType === singer.Ftype;
          }
        }
      })
    },
    handleAllArea() {
      this.selectArea = -1;
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.activeIndex === -1 && this.selectType === -1) {
          return singer;
        } else {
          if (this.activeIndex === -1) {
            return singer && this.selectType === singer.Ftype;
          } else if (this.selectType === -1) {
            return singer && this.activeIndex === singer.Findex;
          } else {
            return singer && this.activeIndex === singer.Findex && this.selectType === singer.Ftype;
          }
        }
      })
    },
    handleGender(item, idx) {
      this.selectType = item.id;
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.selectArea === -1 && this.activeIndex === -1) {
          return item.id === singer.Ftype;
        } else {
          if (this.activeIndex === -1) {
            return item.id === singer.Ftype && this.selectArea === singer.Farea;
          } else if (this.selectArea === -1) {
            return item.id === singer.Ftype && this.activeIndex === singer.Findex;
          } else {
            return item.id === singer.Ftype && this.activeIndex === singer.Findex && this.selectArea === singer.Farea;
          }
        }
      });
    },
    handleAllType() {
      this.selectType = -1;
      this.singerFilterList = this.singerList.filter((singer) => {
        if (this.selectArea === -1 && this.activeIndex === -1) {
          return singer;
        } else {
          if (this.selectArea === -1) {
            return singer && this.activeIndex === singer.Findex;
          } else if (this.activeIndex === -1) {
            return singer && this.selectArea === singer.Farea;
          } else {
            return singer && this.activeIndex === singer.Findex && this.selectArea === singer.Farea;
          }
        }
      })
    },
    async getSingerListData() {
      const res = await getSingerList();
      const { code, data } = res || {};
      if (code) return;
      this.singerList = this.handleData(data?.list || []);
      this.singerFilterList = this.handleData(data?.list || []);
    },
    getLetter() {
      for (let i = 65; i<= 90; i++) {
        this.letterList.push(String.fromCharCode(i));
      };
    },
    handleData(arr) {
      if (!Array.isArray(arr)) return [];
      const newList = arr.map((item) => {
        const { Fsinger_mid } = item || {};
        const picUrl = `http://y.gtimg.cn/music/photo_new/T001R800x800M000${ Fsinger_mid }.jpg`;
        return {
          ...item,
          picUrl,
        };
      });
      return newList;
    },
  },
  mounted() {
    this.getSingerListData();
    this.getLetter();
  },
  watch: {
    
  }
};
</script>

<style lang="scss" scoped>

.singer-box {
  .top {
    .first, .second {
      display: flex;
      width: 600px;
      align-items: center;
      margin-bottom: 20px;
      div {
        width: 80px;
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        border: 1px solid rgba(20, 20, 20, .5);
        border-radius: 20px;
        cursor: pointer;
        &:hover {
          background-color: rgba(30, 30, 30, .1);
        }
      }
    }
    .filterActive {
      background-color: pink;
      color: #fff;
    }
  }
  .letter-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-right: 50px;
    .letter-item {
      cursor: pointer;
      color: skyblue;
      &:hover {
        color: lightpink;
      }
    }
    .active {
      color: lightpink;
    }
  }
  .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 80px;
    .singer {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 20px;
      .pic {
        img {
          cursor: pointer;
          width: 200px;
          border-radius: 50%;
          margin-bottom: 10px;
        }
      }
      .name {
        width: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }
  }
}
</style>
